<template>
  <div>
    <div class="top">
      <el-form :inline="true">
        <el-form-item label="设备编号：">
          <el-input v-model="data.innerCode" placeholder="请输入" style="width:180px" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="inquire">
            <i class="el-icon-search" />
            查询</el-button>
        </el-form-item>
      </el-form>
      <svg class="sousuo" />
    </div>
    <div class="list">
      <!-- 按钮 -->
      <el-button type="warning" @click="djksxz"> <i class="el-icon-circle-plus-outline" /> 新建</el-button>
      <el-button @click="strategyList">批量操作</el-button>
      <!-- 列表 -->
      <el-table :data="list" @select="aapp" @select-all="openlistall">
        <el-table-column
          type="selection"
          width="55"
        />
        <el-table-column type="index" label="序号">
          <template scope="scope">
            <span>{{ (data.pageIndex-1)*data.pageSize+scope.$index+1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="设备编号">
          <template v-slot="{ row }">
            <span>{{ row ?.innerCode }}</span>
          </template>
        </el-table-column>
        <el-table-column label="设备型号">
          <template v-slot="{ row }">
            <span>{{ row?.type?.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="详细地址">
          <template v-slot="{ row }">
            <span>{{ row?.node?.name }}</span>
          </template>

        </el-table-column>
        <el-table-column label="合作商">
          <template v-slot="{ row }">
            <span>{{ row.ownerName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="设备状态">
          <template v-slot="{ row }">
            <span>{{ vmStatuslist[ row.vmStatus ] }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="{ row }">
            <el-button type="text" @click="getCargo(row)">货道</el-button>
            <el-button type="text" @click="Strategic(row)">策略</el-button>
            <el-button type="text" @click="modification(row)">修改</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-row type="flex" style="height:60px" align="middle" justify="space-between">
        <span class="record">共{{ totalCount }}条记录 第{{ data.pageIndex }}/ {{ totalPage }} 页</span>
        <el-pagination
          :page-size="data.pagesize"
          :current-page="data.pageIndex"
          layout="prev,  next"
          :total="+totalCount"
          prev-text="上一页"
          next-text="下一页"

          @current-change="changePage"
        />
      </el-row>
    </div>
    <!-- 策略管理弹窗-->
    <el-dialog
      title="策略管理"
      :visible.sync="StrategicShow"
      width="45%"
      :before-close="handleClose"
    >
      <el-row>
        <el-col :push="3" :span="12">机器编号：{{ StrategyList?.innerCode }}</el-col>
        <el-col :push="3" :span="12">策略名称：{{ StrategyList?.policyName }}</el-col>
        <el-col :push="3" :span="12">策略方案：{{ StrategyList?.discount }}%</el-col>
        <el-row>
          <el-col :span="12" :offset="8">
            <el-button class="elColBtn" @click="qxCl">取消策略</el-button>
          </el-col>
        </el-row>
      </el-row>

    </el-dialog>
    <!-- // 修改设备弹窗 -->
    <el-dialog
      title="修改设备"
      :visible.sync="modificationShow"
      width="45%"
      :before-close="handleClose"
    >
      <el-row>
        <el-col class="elCol" :span="24">机器编号：{{ modificationList?.innerCode }}</el-col>
        <el-col class="elCol" :span="24">供货时间：{{ modificationList?.updateTime }}</el-col>
        <el-col class="elCol" :span="24">设备类型：{{ modificationList?.type?.name }}</el-col>
        <el-col class="elCol" :span="24">设备容量：{{ modificationList?.type?.vmCol }}</el-col>
        <el-col class="elCol" :span="24">设备点位：
          <template>
            <el-select v-model="value" placeholder="请选择">
              <el-option
                v-for="item in ptList"
                :key="item.Id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </template>
        </el-col>
        <el-col class="elCol" :span="24">&emsp;合作商：{{ modificationList?.ownerName }} </el-col>
        <el-col class="elCol" :span="24">所属区域：{{ modificationList?.region?.name }}</el-col>
        <el-col class="elCol" :span="24">设备地址：{{ modificationList?.node?.addr }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="12" :offset="8">
          <el-button class="elColBtn">取消</el-button> <el-button type="warning" @click="putParticulars">确认</el-button>
        </el-col>
      </el-row>
    </el-dialog>
    <!-- 批量策略管理 -->
    <el-dialog
      title="批量策略管理"
      :visible.sync="BatchPolicyManagementShow"
      width="50%"
      :before-close="handleClose"
    >
      <el-form>
        <el-form-item label="选择策略:">
          <el-select v-model="policyId" placeholder="请选择">
            <el-option
              v-for="item in strategyLi"
              :key="item.policyId"
              :label="item.policyName"
              :value="item.policyId"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <el-row>
        <el-col :span="12" :offset="8">
          <el-button class="elColBtn">取消</el-button> <el-button type="warning" @click="putCeluo">确认</el-button>
        </el-col>
      </el-row>
    </el-dialog>
    <el-dialog
      title="货道设置"
      :visible.sync="huodaoshezhiShow"
      width="70%"
      :before-close="handleClose"
    >
      <div class="channel-basic">
        <span class="vm-row">货道行数：{{ myRow ?. type ?.typeId }}</span>
        <span class="vm-col">货道列数： {{ myRow ?. type ?. vmCol }}</span>
        <span class="channel-max-capacity">货道容量（个）： {{ myRow ?. type ?. vmCol }}</span>
        <el-button type="primary" @click="openzhineng">智能排货</el-button>
      </div>
      <el-carousel indicator-position="outside">
        <el-carousel-item v-for="(item,index) in goods" :key="index">
          <el-scrollbar class="scowbox">
            <div class="tmd">
              <div v-for="(e,i) in item" :key="i" class="item">
                <div class="code">{{ e?.channelCode }}</div>
                <div class="sku ">
                  <img v-if="e?.sku?.skuImage" class="img" :src="e?.sku?.skuImage" alt="">
                  <img v-else class="img" src="~@/assets/zanwu.png" alt="">
                  <div class="name">{{ (e?.sku?.skuName)? e?.sku?.skuName:'暂无商品' }}</div>
                </div>
                <div>
                  <el-button size="mini" @click="getCommodityAlllll(e)">添加</el-button>
                  <el-button size="mini" @click="delGoods(e.channelId)">删除</el-button>
                </div>
              </div>
            </div>
          </el-scrollbar>
        </el-carousel-item>
      </el-carousel>
      <div style="width: 100%; text-align: center;">
        <el-button type="warning" @click="huodaofun">确认</el-button>
      </div>
    </el-dialog>
    <!-- 智能排货 -->
    <el-dialog
      title="智能排货"
      :visible.sync="zhinengShow"
      width="60%"
      :before-close="handleClosezz"
    >
      <div>该区域属于{{ myRow ?.node?.businessType?.name }} 商圈时候销售以下商品</div>
      <div class="tmd">

        <div v-for="(e,i) in topten" :key="i" class="item">
          <div class="sku space">
            <img class="img" :src="e?.image" alt="">
            <div class="name">{{ e?.skuName }}</div>
          </div>
        </div>
      </div>
      <div class="dialog-footer">
        <el-button type="warning" @click="paijinqi">
          采纳建议
        </el-button>
      </div>
    </el-dialog>
    <!--  选择商品  -->
    <el-dialog
      title="选择商品"
      :visible.sync="xzspshow"
      width="60%"
      :before-close="handleClose"
    >
      <el-form ref="form" :model="putcommo">
        <el-form-item label="商品名称：">
          <el-input v-model="putcommo.skuName" style="width: 300px; padding-right: 20px;" />
          <el-button icon="el-icon-search" type="primary" @click="wykscxl">查询</el-button>
        </el-form-item>
      </el-form>
      <div class="boody">
        <!-- v-for="(item index ) in SkusearchList" :key="index" -->
        <div v-for="item in SkusearchList" :key="item.skuId" class="onelist" @click="qunimade(item)">
          <img v-if="item.skuImage" class="infomg" :src="item.skuImage" alt="">
          <img v-else class="img" src="~@/assets/zanwu.png" alt="">
          <img :class="item.panduan? 'topimg' :'topimgs' " src="~@/assets/queren.png" alt="">
          <p>{{ item.skuName }}</p>
        </div>
      </div>
      <el-pagination
        class="page"
        layout="prev, next"
        :total="50"
        :current-page.sync="putcommo.pageIndex"
        @current-change="getPageChange"
      />
      <div class="boody">
        <el-button type="warning" @click="qdbianhuan">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="新增设备"
      :visible.sync="xinzengShow"
      width="45%"
      :before-close="handleClose"
    >
      <el-form label-width="120px">
        <el-form-item label="设备编号：">
          系统自动生成
        </el-form-item>
        <el-form-item label="选择型号：">
          <el-select v-model="xinzengList.vmType" placeholder="请选择">
            <el-option
              v-for="item in xinghaolist"
              :key="item.typeId"
              :label="item.name"
              :value="item.typeId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="选择点位：">
          <el-select v-model="xinzengList.nodeId" placeholder="请选择">
            <el-option
              v-for="item in ptList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div class="xinzengBtn">
        <el-button class="btn">取消</el-button>
        <el-button class="btn" type="warning" @click="cav">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getCargoChannel, getcommodity, getEquipment, GETshebeileixing, getTop, gputEquipment, POSTshouhuoji, putcommodity, putGputEquipment } from '@/api/department'
import { getpointLocation } from '@/api/attendance'
import { CancellationPolicy, getStrategy, getstrategyList } from '@/api/salary'
export default {
  name: 'Department1',
  data() {
    return {
      xinzengShow: false,
      // 选择商品弹框
      xzspshow: false,
      // 智能排货弹框
      zhinengShow: false,
      // 货道设置弹框
      huodaoshezhiShow: false,
      // 策略选项  测试后期传值
      policyId: null,
      // 批量策略滚利弹框
      BatchPolicyManagementShow: false,
      // 策略管理弹窗
      StrategicShow: false,
      // 修改设备弹框
      modificationShow: false,
      // 获取列表数据
      data: {
        pageIndex: 1,
        pageSize: 10,
        status: '',
        innerCode: ''
      },
      // 需要添加的商品数据
      tjsp: [],

      // 商品搜索数据
      commodityList: [],
      // 获取点位信息数据
      pointLocation: {
        pageIndex: 1,
        pageSize: 10000000
      },
      // 设备点位
      value: '',
      // 总数据
      totalCount: '',
      // 总页数
      totalPage: '',
      // 列表数据
      list: [],
      // 我的 row
      myRow: [],
      // 点位信息数据
      ptList: [],
      // 修改数据列表
      modificationList: [],
      // 策略列表
      strategyLi: [],
      // 货机策略列表
      StrategyList: [],
      // top10商品
      topten: [],
      // 售货机状态映射表
      vmStatuslist: {
        0: '未投放',
        1: '运营',
        3: '撤机'
      },
      // 批量选择传入参数数组
      innerCodeList: [],
      // 获取全部商品传入参数
      putcommo: {
        pageIndex: 1,
        pageSize: 10,
        skuName: ''
      },
      // 全部商品列表
      SkusearchList: [],
      // 自己转换的数组
      goods: {
        goods1: [],
        goods2: []
      },
      // 被选中商品
      eslist: [],
      // 新增数据
      xinzengList: {
        vmType: '',
        nodeId: '',
        createUserId: 1
      },
      xinghaolist: []
    }
  },
  created() {
    // 页面列表
    this.getEquipmentList()
    // 点位信息列表
    this.getpointLocationList()
    this.getCommodityAll()
  },
  methods: {
    // 采纳建议关闭弹框
    handleClosezz() {
      this.zhinengShow = false
    },
    // 关闭弹窗
    handleClose() {
      this.xinzengShow = false
      this.huodaoshezhiShow = false
      this.BatchPolicyManagementShow = false
      this.modificationShow = false
      this.StrategicShow = false
    },
    // 分页
    changePage(newPage) {
      // console.log(newPage)
      this.data.pageIndex = newPage
      // console.log(this.data)
      this.getEquipmentList()
    },
    // 获取列表数据
    async getEquipmentList() {
      const res = await getEquipment(this.data)
      this.list = res.currentPageRecords
      this.totalCount = res.totalCount
      this.totalPage = res.totalPage
      // console.log(res)
    },
    //  获取点位信息数据
    async getpointLocationList() {
      const res = await getpointLocation(this.pointLocation)
      this.ptList = res.currentPageRecords
      console.log(this.ptList)
    },
    // 查询重新渲染页面
    inquire() {
      this.getEquipmentList()
    },
    // 获取本行数据,并打开弹框
    modification(row) {
      console.log(row)
      this.value = row.node.id
      this.modificationList = row
      this.modificationShow = true
    },
    // 修改设备点位
    async putParticulars() {
      await gputEquipment(this.modificationList.id, this.modificationList.nodeId)
      this.modificationShow = false
      this.$message.success('修改成功')
      this.getEquipmentList()
    },

    // 查询售货机策略
    async Strategic(row) {
      console.log(row)
      this.StrategyList = await getStrategy(row.innerCode)
      if (this.StrategyList) {
        this.StrategicShow = true
      } else {
        this.innerCodeList = []
        this.innerCodeList.push(row.innerCode)
        this.strategyLi = await getstrategyList()
        this.BatchPolicyManagementShow = true
      }
    },
    // 取消策略
    async qxCl() {
      await CancellationPolicy(this.StrategyList)
      this.StrategicShow = false
      this.$message.success('取消成功')
      this.getEquipmentList()
    },
    // 批量选择参数 单选版
    aapp(select) {
      console.log(select)
      this.innerCodeList = []
      select.forEach(item => {
        this.innerCodeList.push(item.innerCode)
      })
      console.log(this.innerCodeList)
    },
    // 批量选择参数  全选版
    openlistall(select) {
      this.innerCodeList = []
      select.forEach(item => {
        this.innerCodeList.push(item.innerCode)
      })
      console.log(this.innerCodeList)
    },
    // 获取策略列表、
    async strategyList() {
      if (this.innerCodeList.length <= 0) {
        console.log('请勾选设备')
        this.$message.error('请勾选设备')
        return
      }
      this.BatchPolicyManagementShow = true
      this.strategyLi = await getstrategyList()
      console.log(this.strategyLi)
    },
    async putCeluo() {
      const res = await putGputEquipment({ innerCodeList: this.innerCodeList, policyId: this.policyId })
      console.log(res)
      this.$message.success('修改成功')
      this.BatchPolicyManagementShow = false
    },
    // 重新解构数组
    async getCargo(row) {
      const res = await getCargoChannel(row.innerCode)
      this.myRow = row
      this.goods.goods1 = res.filter(item => item.channelCode.substring(2) <= 5)
      this.goods.goods2 = res.filter(item => item.channelCode.substring(2) > 5)
      console.log(this.goods)
      console.log(this.myRow) // tab bar
      this.huodaoshezhiShow = true
    },
    // 获取top 前十商品
    async openzhineng() {
      this.topten = await getTop(this.myRow.node?.businessType?.id)
      console.log(this.topten)
      this.zhinengShow = true
    },
    // 将top前十排进解构渲染数组里面
    paijinqi() {
      for (let i = 0; i < 9; i++) {
        this.goods.goods1[i].sku.skuId = this.topten[i].skuId
        this.goods.goods1[i].sku.skuImage = this.topten[i].image
        this.goods.goods1[i].sku.skuName = this.topten[i].skuName
      }
      this.$message.success('更新成功，请确认更新')
      this.zhinengShow = false
      console.log(this.topten)
      console.log(this.goods.goods1)
    },
    // 将goodsl里面的数据提取出来上传
    async huodaofun() {
      const g1 = []
      const g2 = []
      this.goods.goods1.forEach((item) => {
        if (item?.sku !== null) {
          g1.push({ channelCode: item?.channelCode, skuId: item?.sku?.skuId })
        }
      })
      this.goods.goods2.forEach((item) => {
        if (item?.sku !== null) {
          g2.push({ channelCode: item?.channelCode, skuId: item?.sku?.skuId })
        }
      })
      const channelList = [...g1, ...g2]
      console.log(channelList)
      console.log(this.myRow.innerCode)
      const res = await putcommodity({ innerCode: this.myRow.innerCode, channelList: channelList })
      this.huodaoshezhiShow = false
      console.log(res)
      this.$message.success('更新成功')
    },
    getPageChange(newval) {
      this.putcommo.pageIndex = newval
      this.getCommodityAll()
    },
    getCommodityAlllll(e) {
      this.tjsp = e
      this.xzspshow = true
    },
    async getCommodityAll() {
      const res = await getcommodity(this.putcommo)
      this.SkusearchList = res.currentPageRecords
      this.SkusearchList.map(item => {
        item.panduan = false
      })
      // console.log(this.SkusearchList)
    },
    async wykscxl() {
      console.log(this.putcommo)
      await this.getCommodityAll()
    },
    // 删除
    delGoods(id) {
      console.log(id)
      this.goods.goods1.map(item => {
        if (item.channelId === id) {
          item.sku = null
        }
      })
      this.goods.goods2.map(item => {
        if (item.channelId === id) {
          item.sku = null
        }
      })
      this.$message.success('删除成功，请确认更新')
    },
    qunimade(e) {
      this.SkusearchList.map((item) => {
        if (item.panduan) {
          item.panduan = false
          console.log(item.panduan)
          return
        }
        if (item.skuName === e.skuName) {
          item.panduan = true
          console.log(item.panduan)
        }
      })
      this.tjsp.sku = e
      console.log(e)
      console.log(this.tjsp.sku)
    },
    qdbianhuan() {
      this.goods.goods1.map(item => {
        if (item.channelId === this.tjsp.channelId) {
          item.sku = this.tjsp.sku
        }
      })
      this.goods.goods2.map(item => {
        if (item.channelId === this.tjsp.channelId) {
          item.sku = this.tjsp.sku
        }
      })
      this.$message.success('添加成功，请确认更新')
      this.xzspshow = false
    },
    async djksxz() {
      const res = await GETshebeileixing(this.pointLocation)
      this.xinghaolist = res.currentPageRecords
      console.log(this.xinghaolist)
      this.xinzengShow = true
    },
    async cav() {
      await POSTshouhuoji(this.xinzengList)
      this.$message.success('成功新建')
      this.xinzengShow = false
    }
  }
}
</script>

<style  lang='scss' scoped>
.selected{
position: relative;
    width: 134px;
    height: 134px;
    padding-top: 16px;
    background-color: #f6f7fb;
    -webkit-box-shadow: 0 2px 4px 0 rgba(0,0,0,.06);
    box-shadow: 0 2px 4px 0 rgba(0,0,0,.06);
    border-radius: 4px;
    text-align: center;
    cursor: pointer;
}
 .top{
    height: 80px;
    margin: 20px;
    padding: 18px;
    background-color: #fff;
  }
    .list{
    padding: 18px;
    margin: 20px;
    background-color: #fff;
   }
    ::v-deep.el-pagination .btn-next{
  background-color: #d5ddf8 !important;
  width: 70px;
  height: 30px;
  text-align: center;
  border-radius: 3px;
   margin: 10px;
}

::v-deep.el-pagination .btn-prev{
  background-color: #d5ddf8 !important;
  width: 70px;
  height: 30px;
  text-align: center;
  border-radius: 3px;
  margin: 10px;
}
.record{
  color: #dbdfe5;
}
.elCol{
  margin: 20px 60px;
}
.elColBtn{
  margin-right: 50px;
}
.scowbox{
  height: 600px;
  width: 100%;
  //el-scrollbar 组件名
}
.channel-basic{
display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    height: 56px;
    margin-bottom: 16px;
    background: #f3f6fb;
  .vm-row{margin-left: 43px; }
  .vm-col{margin-left: 55px;}
  .channel-max-capacity{     -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin-left: 54px;
}
}
.tmd{
display: flex !important;
justify-content: center;
flex-wrap: wrap;
  .item{
    margin: 5px;
    position: relative;
    width: 18%;
    height: 160px;
    box-sizing: border-box;
    background: #fff;
    -webkit-box-shadow: 0 2px 4px 0 rgba(0,0,0,.06);
    box-shadow: 0 2px 4px 0 rgba(0,0,0,.06);
    border-radius: 4px;
    text-align: center;
  .code{
    position: absolute;
    top: 10px;
    left: 0;
    width: 43px;
    height: 23px;
    line-height: 23px;
    background: #829bed;
    border-radius: 0 10px 10px 0;
    font-size: 12px;
    color: #fff;
  }
  .sku{
    box-sizing: border-box;
    .img{
          display: inline-block;
    width: 83px;
    height: 84px;
    margin-bottom: 5px;
    -o-object-fit: contain;
    object-fit: contain;
    }

    .name{
      padding: 0 16px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    }
  }
 }
}
.dialog-footer{
    padding-top: 0;
    text-align: center;
}
.boody{
display: flex !important;
justify-content: center;
flex-wrap: wrap;
  .onelist{
    position: relative;
    width: 16%;
  margin: 1%;
  padding: 12px 15px;
  background-color: #f6f7fb;
  .infomg{
        display: inline-block;
    width: 100%;
    height: 84px;
    margin-bottom: 5px;
    -o-object-fit: contain;
    object-fit: contain;
  }
  .topimg{
    position: absolute;
    top: 0;
    left: 0;
  }
  .topimgs{
    position: absolute;
    top: 0;
    left: 0;
    display: none;
  }
  }
}
.xinzengBtn{
  width: 100%;
  display: flex;
  justify-content: center;
  .btn{
    margin: 0 20px;
  }
}
</style>
